<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-date-picker class="select_w" type="datetime" placeholder="开始时间" v-model="filters.startTime"></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-date-picker class="select_w" type="datetime" placeholder="结束时间" v-model="filters.endTime"></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-select class="select_w" v-model="filters.goodsMall" clearable placeholder="商城专区">
						<el-option label="鸿福商城" value="1"></el-option>
						<el-option label="积分商城" value="2"></el-option>
						<el-option label="旅游专区" value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select class="select_w" v-model="filters.takeGoodsType" clearable placeholder="配送方式">
						<el-option label="到店自提(免费)" value="1"></el-option>
						<el-option label="快递配送(免费)" value="2"></el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item>
					<el-select class="select_w" v-model="filters.openDistribution" clearable placeholder="分销提成">
						<el-option label="开启" value="1"></el-option>
						<el-option label="关闭" value="0"></el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item>
					<el-select class="select_w" v-model="filters.status" clearable placeholder="订单状态">
						<el-option label="待发货" value="1"></el-option>
						<el-option label="待收货" value="2"></el-option>
						<el-option label="已结束" value="3"></el-option>
						<el-option label="已取消" value="4"></el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item >
					<el-select class="select_w" v-model="filters.orderNo" clearable placeholder="订单号">
						<el-option label="订单号" value="1"></el-option>
						<el-option label="买家ID" value="2"></el-option>
						<el-option label="买家昵称" value="3"></el-option>
						<el-option label="买家手机号" value="4"></el-option>
						<el-option label="店铺名称" value="5"></el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item>
					<el-input class="select_w" v-model="filters.orderNo" placeholder="输入订单号查询"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getUsers">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		
		<!--列表-->
		<el-col :span="24">
			<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
				<!-- <el-table-column type="selection" width="55" fixed></el-table-column> -->
				<el-table-column type="index" align="center" width="60" fixed></el-table-column>
				<el-table-column prop="orderNo" align="center" min-width="200" label="订单号"></el-table-column>
				<el-table-column align="center" width="120" label="商城专区">
					<template slot-scope="scope">
						<span v-if="scope.row.goodsMall == 1">鸿福商城</span>
						<span v-if="scope.row.goodsMall == 2">积分商城</span>
						<span v-if="scope.row.goodsMall == 3">旅游专区</span>
					</template>
				</el-table-column>
				<el-table-column align="center" min-width="160" label="商品信息">
					<!--<template slot-scope="scope">
						<span v-for="item in scope.row.insGoods">{{item.goods.name}}</span>
					</template>-->
					<template slot-scope="scope">
						<el-popover trigger="hover" placement="top">
							<p style="width: 160px;line-height: 1.5;"><span v-for="item,index in scope.row.insGoods" :key="index">{{item.goods.name}}</span></p>
							<div slot="reference" class="name-wrapper">
								<p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"><span v-for="item,index in scope.row.insGoods" :key="index">{{item.goods.name}}</span></p>
							</div>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column align="center" min-width="100" label="订单总额">
					<template slot-scope="scope">
						<span v-if="scope.row.goodsMall == 1">{{scope.row.amount}}元</span>
						<span v-if="scope.row.goodsMall == 2">{{scope.row.points}}积分</span>
						<span v-if="scope.row.goodsMall == 3">{{scope.row.amount}}元</span>
					</template>
				</el-table-column>
				<el-table-column prop="userId" align="center" min-width="80" label="买家ID"></el-table-column>
				<el-table-column prop="orderUser.nickname" align="center" min-width="140" label="买家昵称"></el-table-column>
				<el-table-column prop="orderUser.phone" align="center" min-width="130" label="买家手机号"></el-table-column>
				<el-table-column prop="orderShop.name" align="center" min-width="140" label="店铺名称"></el-table-column>
				<el-table-column label="订单状态" align="center" width="100">
					<template slot-scope="scope">
						<span v-if="scope.row.status == 1">待发货</span>
						<span v-if="scope.row.status == 2">待收货</span>
						<span v-if="scope.row.status == 3">已结束</span>
						<span v-if="scope.row.status == 4">已取消</span>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" align="center" width="240" label="下单时间" :formatter="formatDateTime"></el-table-column>
				<el-table-column align="center" width="300" label="操作" fixed="right">
					<template slot-scope="scope">
						<el-button type="primary" size="small" v-if="scope.row.status == 1" @click.native="handleConfirm(scope.$index, scope.row)">确认发货</el-button>
						<el-button type="danger" size="small" v-if="scope.row.status == 2" @click.native="orderSubmit(scope.$index, scope.row)">确认收货</el-button>
						<el-button type="danger" size="small" v-if="scope.row.status == 1" @click.native="confirmCancel(scope.$index, scope.row)">取消发货</el-button>
						<el-button type="primary" size="small" @click.native="handleDetail(scope.$index, scope.row)">查看详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="toolbar" style="display: flex;justify-content: flex-end;">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="pageIndex"
					:page-sizes="[10, 20, 30, 40]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total">
				</el-pagination>
			</div>
		</el-col>
		
		<!--详情界面-->
		<el-dialog title="详情" v-model="detailFormVisible" :close-on-click-modal="false">
			<!-- <div v-model="items in detailForm"></div> -->
			<el-row>
				<el-col :span="3">订单号：</el-col>
				<el-col :span="9">{{detailForm.orderNo}}</el-col>
				<el-col :span="3">下单时间：</el-col>
				<el-col :span="9">{{changeToDateStr(detailForm.createTime)}}</el-col>
			</el-row>
			<el-row>
				<el-col :span="3">商城专区：</el-col>
				<el-col :span="9">
					<span v-if="detailForm.goodsMall == 1">鸿福商城</span>
					<span v-if="detailForm.goodsMall == 2">积分商城</span>
					<span v-if="detailForm.goodsMall == 3">旅游专区</span>
				</el-col>
			</el-row>
			<el-row v-for="(items,index) in detailForm.insGoods" :key="index">
				<el-col :span="3">商品信息： </el-col>
				<el-col :span="11">
					<div class="m_t">
						<span>商品ID/货号：</span>
						<span>{{items.goods.id}}</span>
					</div>
					<div class="m_t">
						<span>商品名称：</span>
						<span>{{items.goods.name}}</span>
					</div>
					<div class="m_t">
						<span>商品规格：</span>
						<span v-if="items.goodsProduct.specs">
							<span v-if="!items.goodsProduct == ''" v-for="val,index in Object.keys(JSON.parse(items.goodsProduct.specs))" :key="index">{{ val }}：{{ JSON.parse(items.goodsProduct.specs)[val] }}</span>
						</span>
					</div>
					<div class="m_t">
						<span>商品价格：</span>
						<span>
							<span v-if="!items.goodsProduct == '' && items.goods.type == 2">{{items.goodsProduct.price}}积分</span>
							<span v-if="!items.goodsProduct == '' && items.goods.type != 2">{{items.goodsProduct.price}}元</span>
						</span>
					</div>
					<div class="d_s">
						<el-col :span="10">分销提成（<span v-if="items.goods.openDistribution == 1">已开启</span><span v-if="items.goods.openDistribution == 0">已关闭</span>）</el-col>
						<el-col :span="7" v-if="items.goods.openDistribution == 1">
							<span>一级:</span>
							<span>{{items.istributeValueOne}}%</span>
						</el-col>
						<el-col :span="7" v-if="items.goods.openDistribution == 1">
							<span>二级:</span>
							<span>{{items.istributeValueTwo}}%</span>
						</el-col>
					</div>
				</el-col>
				<el-col :span="10" v-for="items,index in detailForm.insGoods" :key="index">
					<span>商品图片</span>
					<div class="img_box" v-if="items.goods.goodsImages != ''">
						<img :src="items.goods.goodsImages[0].image" alt="商品图片xinxi "/>
					</div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="3">订单总额： </el-col>
				<el-col v-if="detailForm.goodsMall != 2" :span="9">{{detailForm.amount}}元</el-col>
				<el-col v-if="detailForm.goodsMall == 2" :span="9">{{detailForm.points}}积分</el-col>
			</el-row>
			<el-row>
				<el-col :span="3">买家ID： </el-col>
				<el-col :span="9">{{detailOrderUser.id}}</el-col>
				<el-col :span="3">买家昵称： </el-col>
				<el-col :span="9">{{detailOrderUser.nickname}}</el-col>
			</el-row>
			<el-row>
				<el-col :span="3">配送方式：</el-col>
				<el-col :span="9">
					<el-col :span="24">
						<span v-if="detailForm.takeGoodsType == 1">到店自提(免费)</span>
						<span v-if="detailForm.takeGoodsType == 2">快递配送(免费)</span>
					</el-col>
					<el-col :span="24">
						<div style="margin-top:14px">
							<span v-if="detailForm.takeGoodsType == 1 && !detailGetShopMsg ==''">已选：{{detailGetShopMsg.name}},{{detailGetShopMsg.phone}},{{detailGetShopMsg.address}}</span>
							<span v-if="detailForm.takeGoodsType == 2 && !detailUserAddress ==''">已选：{{detailUserAddress.name}}，{{detailUserAddress.phone}}，{{detailUserAddress.address}}</span>
							<span v-if="detailForm.takeGoodsType == 3 && !detailUserAddress ==''">已选：{{detailUserAddress.name}}，{{detailUserAddress.phone}}，{{detailUserAddress.address}}</span>
						</div>
					</el-col>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="3">备注： </el-col>
				<el-col :span="9">{{detailForm.memo}}</el-col>
			</el-row>
			<el-row>
				<el-col :span="3">订单状态： </el-col>
				<el-col :span="6">
					<span v-if="detailForm.status == 1">待发货</span>
					<span v-if="detailForm.status == 2">待收货</span>
					<span v-if="detailForm.status == 3">已结束</span>
					<span v-if="detailForm.status == 4">已取消</span>
				</el-col>
				<el-col :span="15">
					<div style="float:right;margin-right:20px">
						<el-button v-if="detailForm.status == 2" type="primary" @click.native="detailconfirmGoods" :loading="detailLoading">确认收货</el-button>
						<el-button v-if="detailForm.status == 1" type="primary" @click.native="handleConfirmSendGoods" :loading="detailLoading">确认发货</el-button>
						<el-button v-if="detailForm.status == 1" @click.native="innerVisible">取消发货</el-button>
					</div>
				</el-col>
			</el-row>
		</el-dialog>
	</section>
</template>

<script>
	
	import { getOrderList, getOrderDetail, modifyOrder, getOrderCancel, getOrderConfirm } from '../../api/api';
	
	export default {
		data() {
			return {
				filters: {
					startTime: null,
					endTime: null,
					goodsMall: '',//商城专区
					takeGoodsType: '',//配送方式
					//openDistribution: '',//分销提成
					status: '',//订单状态
					orderNo: ''
					// keyword: ''
				},
				pic:[],
				users: [],
				insGoods: [],//商品信息
				total: 0,
				pageIndex: 1,
				pageSize: 10,
				detailid: '',
				listLoading: false,
				sels: [],//列表选中列
				textarea: '',
				cancelDialogVisible: false,//取消订单
				detailFormVisible: false,//编辑界面是否显示
				detailLoading: false,
				detailForm: {},
				detailOrderUser: {},
				detailOrderShop: {},
				detailUserAddress: {},
				detailGetShopMsg: {},
				detailPara: {
					id:'',
					shopId: '',
					userId: '',
					orderNo: ''
				}
			}
		},
		methods: {
			formatDateTime: function (row, column){
				var date = row[column.property];
				if (date == undefined) {
					return "";
				}
				return this.moment(date).format("YYYY-MM-DD HH:mm:ss");
			},
			changeToDateStr:function(date){
				return this.moment(date).format("YYYY-MM-DD HH:mm:ss");
			},
			handleCurrentChange(val) {
				this.pageIndex = val;
				this.getUsers();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getUsers();
			},
			//查看详情
			handleDetail: function (index, row) {
				this.detailFormVisible = true;
				// this.detailForm = Object.assign({}, row);
				this.detailid = row.id;
				let para = {
					id: row.id
				};
				console.log(para)
				// this.listLoading = true;
				getOrderDetail(para).then((res) => {
					this.detailForm = res.data;
					console.log(this.detailForm);
					this.detailOrderUser = res.data.orderUser;
					this.detailOrderShop = res.data.orderShop;
					this.detailUserAddress = res.data.userAddress;
					this.detailGetShopMsg = res.data.getShopMsg
					this.detailPara.id = res.data.id,
					this.detailPara.shopId = res.data.shopId,
					this.detailPara.userId = res.data.userId,
					this.detailPara.orderNo = res.data.orderNo,
					this.listLoading = false;
				});
			},
			//获取用户列表
			getUsers() {
				let para = {
					page: this.pageIndex,
					pageSize: this.pageSize,
					startTime: this.filters.startTime,
					endTime: this.filters.endTime,
					goodsMall: this.filters.goodsMall,//商城专区
					takeGoodsType: this.filters.takeGoodsType,//配送方式
					//openDistribution: this.filters.openDistribution,//分销提成
					status: this.filters.status,//订单状态
					orderNo: this.filters.orderNo
					//keyword: this.filters.keyword
				};
				console.log(para);
				this.listLoading = true;
				getOrderList(para).then((res) => {
					console.log(res);
					this.users = res.data.data;
					this.total = res.data.totalCount;
					this.listLoading = false;
				});
			},
			//确认发货--列表status==2
			handleConfirm: function(index, row) {
				this.$confirm('确认发货吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = {
						id: row.id,
						shopId: row.shopId,
						userId: row.userId,
						orderNo: row.orderNo,
						status: 2
					};
					modifyOrder(para).then((res) => {
						this.listLoading = false;
						this.$message({
							message: '确认发货成功',
							type: 'success'
						});
						this.getUsers();
					});
				}).catch(() => {
				
				});
			},
			//列表--确认收货status==3
			orderSubmit: function (index, row) {
				this.$confirm('确认收货吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = {
						id: row.id,
						shopId: row.shopId,
						userId: row.userId,
						orderNo: row.orderNo,
						status: 3
					};
					modifyOrder(para).then((res) => {
						this.listLoading = false;
						this.$message({
							message: '确认收货成功',
							type: 'success'
						});
						this.getUsers();
					});
				}).catch(() => {
				
				});
			},
			//列表--取消发货status==4
			confirmCancel: function (index, row) {
				this.$prompt('取消发货原因', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPlaceholder: '请输入取消发货原因，不超过20字'
				}).then(({ value }) => {
					let para = {
						id: row.id,
						shopId: row.shopId,
						userId: row.userId,
						orderNo: row.orderNo,
						return_msg: value,
						status: 4
					};
					modifyOrder(para).then((res) => {
						this.$message({
							type: 'success',
							message: '取消发货成功'
						});
						this.getUsers();
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					});
				});
			},
			
			//详情--取消发货status == 4
			innerVisible: function () {
				this.$prompt('取消发货原因', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPlaceholder: '请输入取消发货原因，不超过20字'
					// inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
					// inputErrorMessage: '邮箱格式不正确'
				}).then(({ value }) => {
					let para = this.detailPara;
					para.status = 4;
					para.return_msg = value;
					modifyOrder(para).then((res) => {
						this.$message({
							type: 'success',
							message: '取消发货成功'
						});
						this.detailFormVisible = false;
						this.getUsers();
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					});
				});
			},
			//详情--确认收货status==3
			detailconfirmGoods: function () {
				this.$confirm('确认收货吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = this.detailPara;
					para.status = 3;
					modifyOrder(para).then((res) => {
						this.listLoading = false;
						this.$message({
							message: '确认收货成功',
							type: 'success'
						});
						this.detailFormVisible = false;
						this.getUsers();
					});
				}).catch(() => {
				
				});
			},
			//详情--确认发货status==2
			handleConfirmSendGoods: function() {
				this.$confirm('确认发货吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = this.detailPara;
					para.status = 2;
					modifyOrder(para).then((res) => {
						this.listLoading = false;
						this.$message({
							message: '确认发货成功',
							type: 'success'
						});
						this.detailFormVisible = false;
						this.getUsers();
					});
				}).catch(() => {
				
				});
			},
			selsChange: function (sels) {
				this.sels = sels;
			},
		},
		mounted() {
			this.getUsers();
			
			// this.handleConfirm();
			// this.confirmCancel();
			// this.orderSubmit()
		}
	}

</script>

<style scoped>
	.select_w{
		width: 220px;
	}
	.el-row,.m_t,.d_s{
		margin-top: 30px;
	}
	.m_t span{
		display: inline-block;
	}
	.m_t span:nth-of-type(1){
		width: 150px;
	}
	.d_s span{
		display: inline-block;
	}
	.img_box{
		width: 320px;
		/* height: 320px; */
	}
	.img_box img{
		width: 100%;
		height: 100%;
	}
</style>
